<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { $DrugList } from '@/api/drug'
const router = useRouter()

// 获取药品列表
const drugList = ref([])
onMounted(() => {
    $DrugList().then(res => {
        drugList.value = res.data.slice(0, 4)
    })
})

</script>

<template>
    <div class="medicine">
        <div class="medicine-title">药品管理</div>
        <div class="medicine-text">药品质量关乎生命,监督管理情系万家</div>
        <div class="medicine-list">
            <div class="medicine-item" v-for="item in drugList" :key="item.id">
                <img class="medicine-item-img" :src="item.url">
                <div class=" medicine-item-btn" @click="$router.push('/drugIntroduce?id=' + item.id)">了解详情 ></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.medicine {
    display: flex;
    flex-direction: column;

    .medicine-title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2vw;
        margin-top: 4vw;
    }

    .medicine-text {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9vw;
        margin: 1vw 0 2vw;
    }

    .medicine-list {
        display: flex;
        width: 79vw;
        margin: auto;
        justify-content: space-between;

        .medicine-item {
            width: 19vw;
            height: 46vh;
            background-color: #f5f5f5;
            padding-top: 1vh;

            .medicine-item-img {
                display: flex;
                width: 15vw;
                height: 20vh;
                margin: 6vh auto 0;
            }

            .medicine-item-title {
                display: flex;
                justify-content: center;
                font-size: 1.2vw;
                margin-top: 2vh;
            }

            .medicine-item-btn {
                display: none;
                justify-content: center;
                align-items: center;
                width: 8vw;
                height: 4vh;
                background: #000;
                font-size: 1vw;
                border-radius: 4vh;
                margin: 5vh auto 0;
                cursor: pointer;
            }
        }

        .medicine-item:hover {
            color: #fff;
            background: #45c998;
            padding-top: 0;

            .medicine-item-btn {
                display: flex;
            }
        }
    }
}
</style>